<!DOCTYPE HTML>
<html xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<body>
<div class="page-bar"><!-- 当前位置-->
    <ul class="page-breadcrumb">
        <li>
            <i class="fa fa-home"></i>
            <a href="#welcome-index-page">后台管理</a>
            <i class="fa fa-angle-right"></i>
        </li>
        <li>
            <i class="fa fa-user"></i>
            <a href="#welcome-index-page">用户管理</a>
        </li>
    </ul>
</div>
<div class="row">
    <div class="col-md-12">
        <div class="row"><!-- 操作盒子 -->
            <div class="col-md-10 col-sm-12">
                <div class="col-md-2">
                    <select name="area_zou" id="level1" class="form-control"
                            onchange="Area.change('level1','level2','level3')">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <select name="area_country" id="level2" class="form-control"
                            onchange="Area.change('level2','level3')">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="col-md-3">
                    <input name="area_city" type="text" class="form-control" placeholder="城市名称"/>
                </div>
                <div class="col-md-2">
                    <button class="btn btn-circle green"><i class="fa fa-search"></i>查询</button>
                </div>
            </div>
        </div>
        <div class="table-responsive">
            <div id="userTableBTNs">
                <button sec:authorize="hasRole('user-create')" class="btn btn-success add"><i class="fa fa-check"></i>
                    新增
                </button>
                <button sec:authorize="hasRole('user-delete')" class="btn btn-danger del"><i class="fa fa-check"></i> 删除
                </button>
                <button sec:authorize="hasRole('user-update')" class="btn btn-info upd"><i class="fa fa-check"></i> 编辑
                </button>
                <button sec:authorize="hasRole('user-addRight')" class="btn btn-warning addUserRight"><i
                        class="fa fa-check"></i> 设置权限
                </button>
                <button sec:authorize="hasRole('user-addRole')" class="btn btn-inverse addUserRole"><i
                        class="fa fa-check"></i> 设置角色
                </button>
            </div>
            <table id="userTable" class="table-striped table-hover" data-mobile-responsive="true"></table>
        </div>
    </div>
</div>

<!-- 添加用户 -->
<div id="saveUser" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">添加用户</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row form-group">
                        <label class="control-label col-md-2">账号<span class="required"
                                                                      aria-required="true">* </span></label>
                        <div class="col-md-9">
                            <input name="username" type="text" class="form-control" placeholder="登陆账号" required="true"/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="control-label col-md-2">密码<span class="required"
                                                                      aria-required="true">* </span></label>
                        <div class="col-md-9">
                            <input name="password" type="password" class="form-control" placeholder="登陆密码"
                                   required="true"/>
                        </div>
                    </div>
                    <div class="row form-group">
                        <label class="control-label col-md-2">真实姓名<span class="required" aria-required="true">* </span></label>
                        <div class="col-md-9">
                            <input name="realName" type="text" class="form-control" placeholder="真实姓名" required="true"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn dark btn-outline cancel">取消</button>
                <button type="submit" class="btn green sure">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 设置角色 -->
<div id="addUserRole" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">设置用户角色</h4>
            </div>
            <div class="modal-body" style="height:500px">
                <select multiple="multiple" class="select-roles"></select>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn dark btn-outline cancel">取消</button>
                <button type="button" data-dismiss="modal" class="btn green sure">确定</button>
            </div>
        </div>
    </div>
</div>
<!-- 设置权限 -->
<div id="addUserRight" class="modal fade in" tabindex="-1" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                <h4 class="modal-title">设置用户权限</h4>
            </div>
            <div class="modal-body" style="height:500px">
                <div class="form-body select-authorities"></div>
            </div>
            <div class="modal-footer">
                <button type="button" data-dismiss="modal" class="btn dark btn-outline cancel">取消</button>
                <button type="button" data-dismiss="modal" class="btn green sure">确定</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/js/pages/permission/userTable.js"></script>
</body>
</html>